<template>
  <div class="home">
    <h1>{{person}}</h1>
    <button @click="person.age++">++</button>
    <button @click="personChangeByMarkRaw">markRaw</button>
    <button v-if='person.car' @click="changeprice">changeprice</button>
    <button @click="personChangeByToRaw">toRaw</button>
    <hr>
    <h1>自定义ref</h1>
    <AboutViewVue/>
  </div>
</template>

<script>
import { reactive,toRefs,shallowReactive,shallowRef, toRaw,markRaw } from 'vue'
import AboutViewVue from './AboutView.vue';
export default {
  components:{
    AboutViewVue
  },
  setup() {
    let person=reactive({
      name:'lz',
      age:25,
      sex:'男',
      job:{
        solary:10
      }
    })
    function personChangeByMarkRaw(){
      //markRaw是标记一个对象使其永远不具备响应式属性，使用场景渲染不可变的数据列表时使用提高性能
      let car={band:'honda',price:40}
      person.car=markRaw(car)
    }
    function changeprice(){
      person.car.price++
      console.log(person);
    }
    function personChangeByToRaw(){
      //toRow将reactive生成的响应式对象变成普通对象，一般用于读取响应式对象对应的普通对象，不会引起页面的更新
      let p=toRaw(person)
      p.age++
      console.log(p);
    }
    return {
      person,
      personChangeByMarkRaw,
      changeprice,
      personChangeByToRaw
    }
  },
}
</script>
